<template>
    <div ref="editor" class="editor"> </div>
    <el-button @click="saveEditor">保存</el-button>
    <el-input type="textarea" v-model="editorContent"></el-input>
</template>
<script>
import * as monaco from 'monaco-editor'
export default {
    name: "editor",
    data() {
        return {
            monacoEditor: null,
            editorContent:'',
        }
    },
    mounted() {
        this.monacoEditor = monaco.editor.create(this.$refs.editor, {
            value: '', 
            automaticLayout: true,
            // language: 'javascript',
            theme:'vs-dark',
        })
    },
    methods: {
        saveEditor() {
            console.log("t+>", this.monacoEditor)
            let c = this.monacoEditor.getValueLength()
            console.log("content =>", c)
            // this.editorContent = c
        }
    }
}
</script>

<style scoped>
.editor {
    width: 800px;
    height: 500px;
}
</style>